<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<s:form id="frm-main-register" theme="simple" enctype="multipart/form-data">
	<s:token name="token" />
	<div class="container-fluid">
		<div class="row-fluid" style="margin-top: 20px;">
			<div class="span3"></div>
			<div class="span6">
				<span>Customer Registration</span>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span3"></div>
			<div class="span6 div-border">
				<div class="form-horizontal">
					<div class="control-group"> </div>
					<div class="control-group ">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="userName">
							<s:text name="label.customer.username" /><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:textfield id="userName" cssClass="validate[required] input-field" name="accountContext.userName"/>
						</div>
					</div>
					<div class="control-group ">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="password">
							<s:text name="label.customer.password"/><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:password id="password" cssClass=" validate[required]  input-field " name="accountContext.password"/>
						</div>
					</div>
					<div class="control-group ">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="retypePassword">
							<s:text name="label.customer.retype.password"/><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:password id="retypePassword" cssClass=" validate[required,equals[password]] input-field " />
						</div>
					</div>
					<div class="control-group ">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="email">
							<s:text name="label.customer.email"/><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:textfield id="email" name="accountContext.email" type="email" cssClass=" validate[required,custom[email]] input-field" />
						</div>
					</div>
					<div class="control-group ">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="phone">
							<s:text name="label.customer.phone"/><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:textfield id="phone" name="accountContext.phoneNumber" cssClass=" validate[required,custom[phone]] input-field" />
						</div>
					</div>
					<div class="control-group ">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="zipCode">
							<s:text name="label.customer.zipcode"/><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:textfield id="zipCode" name="accountContex.zipCode" cssClass=" validate[required,custom[onlyNumberSp]] input-field" />
						</div>
					</div>
					<div class="control-group ">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="firstName">
							<s:text name="label.customer.firstName"/><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:textfield id="firstName" name="accountContex.firstName" cssClass=" validate[required,custom[onlyLetterSp]] input-field" />
						</div>
					</div>
					<div class="control-group ">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="lastName">
							<s:text name="label.customer.lastName" /><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:textfield id="lastName" name="accountContex.lastName" cssClass=" validate[required,custom[onlyLetterSp]] input-field" />
						</div>
					</div>
					<div class="control-group">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="birthday">
							<s:text name="label.customer.birthday" /><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:textfield id="birthday" name="accountContex.birthday" cssClass=" validate[required,custom[dateFormat]] input-field" />
						</div>	
					</div>
					<div class="control-group">
						<label class="col-sm-2 control-label control-label-form" style="text-align: left;" for="address">
							<s:text name="label.customer.address" /><span class="required-txt">(*)</span>
						</label>
						<div class="controls">
							<s:textfield id="address" name="accountContex.address" cssClass=" validate[required] input-field" />
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<button class="btn btn-small btn-default" id="btnRegister"><s:text name="button.register"></s:text></button>
							<button class="btn btn-small btn-default" id="btnReset"><s:text name="button.reset"></s:text></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#frm-main-register").validationEngine();
		});
	</script>
</s:form>